<script setup lang="ts">
import { hotSearchAPI,taskAllListAPI } from "@/api/task.ts";
import { reactive } from 'vue'
import TaskList from "@/components/list/TaskList.vue";
import { useRouter } from 'vue-router';
import { taskStore } from '@/store/task'
import { Toast } from "vant";
    const store = taskStore()
    const router = useRouter()
    const history = localStorage.getItem('searchHistory')
    const state = reactive({
        status: 0,
        loading: false,
        value: '',
        taskList: [],
        searchHistory: history ? history.split(',') : [],
        pageNum: 0,
        pageSize: 10,
        searchFlag: false
    })
    // 获取热搜列表
    const gethotSearchList = async() => {
        const res = await hotSearchAPI()
        if (res) {
            store.setHotSearchList(res.data)
        }else{
            Toast(res.msg)
        }
    }
    // 如果pinia中hotSearchList没有数据 调用接口
    if (store.hotSearchList.length <= 0) gethotSearchList()

    // 点击返回 关闭弹窗
    const onClickLeft = () => router.back()

    // 搜索
    const onSearch = (value) => {
        if (!value) return
        // 显示搜索结果
        state.searchFlag = true
        // 历史记录无此值 则存入
        if (!state.searchHistory.includes(value)) {
            state.searchHistory.push(value)
            //存入localStorage
            localStorage.setItem('searchHistory', state.searchHistory)
        }
    }
    // 取消搜索
    const onCancel = () => {
        state.loading = false
        state.value = ''
        state.searchFlag = false
    }
    const gotoSearch = (item) => {
        state.value = item
        onSearch(item)
    }
    // 清除搜索历史
    const clearHistory = () => {
        state.searchHistory = []
        localStorage.removeItem('searchHistory')
    }
    // 获取任务列表
    const getTaskAllList = async() => {
        state.loading = true
        if (state.pageNum == 1) state.taskList = []
        const res = await taskAllListAPI({
            position_name: state.value, // 职位类型
            pageNum: state.pageNum, // 分页页码
            pageSize: state.pageSize, // 每一页多少条数据
        })
        if (res) {
            // 拼接后面请求的内容
            state.taskList = state.taskList.concat(res.records)      
            state.loading = false
            // 判断是否加载完毕
            if (state.taskList.length >= res.total) {
                state.finished = true
            }else{
                state.finished = false
            }
        }else{
            Toast('任务列表查询失败')
            state.loading = false
        }
    }
    const onLoad = () => {
        state.pageNum = state.pageNum + 1
        getTaskAllList()
    }
    const onRefresh = () => {
        state.pageNum = 1
        getTaskAllList()
    }
</script>


<template>
<div :class="state.searchFlag?'search-page': ''">
    <van-nav-bar
        title="搜索"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="search-cont">
        <van-search
            v-model="state.value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
        />
        <div class="search-item" v-if="!state.searchFlag">
            <h3>搜索历史<van-icon name="delete-o" @click="clearHistory" /></h3>
            <dl>
                <dt 
                    v-for="(item,index) in state.searchHistory" 
                    :key="index"
                    @click="gotoSearch(item)"
                >
                {{ item }}
                </dt>
            </dl>
            <h3>热门搜索</h3>
            <dl>
                <dt 
                    v-for="(item,index) in store.hotSearchList" 
                    :key="index"
                    @click="gotoSearch(item.title)"
                >
                {{ item.title }}
                </dt>
            </dl>
        </div>
        <div class="search-list" v-if="state.searchFlag">
            <van-pull-refresh v-model="state.loading" @refresh="onRefresh">     
                <van-list
                    v-model:loading="state.loading"
                    :finished="state.finished"
                    finished-text=""
                    @load="onLoad"
                >
                    <TaskList :taskList="state.taskList"/>
                    <div class="wy-no-data" v-if="!state.loading && state.taskList.length==0">暂无数据</div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</div>
</template>

<style scoped>
.search-page {
    background: #f9f9f9;
    height: 100%;
    min-height: 100vh;
}
>>>.van-search__content {
    border-radius: 0.85rem;
    background: #F5F6F7;
}
>>>.van-search__action {
    font-weight: 400;
    font-size: 0.85rem;
    color: #666666;
}
h3 {
    font-weight: 500;
    font-size: 0.8rem;
    color: #000000;
    line-height: 0.8rem;
    margin: 0.85rem 0 0.85rem;
    display: flex;
}
h3 i {
    flex: 1;
    text-align: right;
    font-size: 0.9rem;
}
.search-cont {
    padding: 0 0.64rem;
}
>>>.van-search--show-action {
    padding-left: 0;
    background: none;
    padding-right: 0;
}
dl dt{
    background: #F5F5F5;
    border-radius: 0.16rem;
    padding: 0.45rem;
    display: inline-block;
    font-weight: 400;
    font-size: 0.64rem;
    color: #333333;
    line-height: 0.64rem;
    margin-right: 0.51rem;
    margin-bottom: 0.53rem;
}
</style>